import { useParent } from '../common/relation'
import { VantComponent } from '../common/component'
VantComponent({
  classes: ['item-title-class'],
  field: true,
  relation: useParent('dropdown-menu', function () {
    this.updateDataFromParent()
  }),
  props: {
    value: {
      type: null,
      observer: 'rerender',
    },
    title: {
      type: String,
      observer: 'rerender',
    },
    disabled: Boolean,
    titleClass: {
      type: String,
      observer: 'rerender',
    },
    options: {
      type: Array,
      value: [],
      observer: 'rerender',
    },
    popupStyle: String,
    useBeforeToggle: {
      type: Boolean,
      value: false,
    },
    rootPortal: {
      type: Boolean,
      value: false,
    },
  },
  data: {
    transition: true,
    showPopup: false,
    showWrapper: false,
    displayTitle: '',
    safeAreaTabBar: false,
  },
  methods: {
    rerender() {
      wx.nextTick(() => {
        var _a
        ;(_a = this.parent) === null || _a === void 0 ? void 0 : _a.updateItemListData()
      })
    },
    updateDataFromParent() {
      if (this.parent) {
        const { overlay, duration, activeColor, closeOnClickOverlay, direction, safeAreaTabBar } =
          this.parent.data
        this.setData({
          overlay,
          duration,
          activeColor,
          closeOnClickOverlay,
          direction,
          safeAreaTabBar,
        })
      }
    },
    onOpen() {
      this.$emit('open')
    },
    onOpened() {
      this.$emit('opened')
    },
    onClose() {
      this.$emit('close')
    },
    onClosed() {
      this.$emit('closed')
      this.setData({ showWrapper: false })
    },
    onOptionTap(event) {
      const { option } = event.currentTarget.dataset
      const { value } = option
      const shouldEmitChange = this.data.value !== value
      this.setData({ showPopup: false, value })
      this.$emit('close')
      this.rerender()
      if (shouldEmitChange) {
        this.$emit('change', value)
      }
    },
    toggle(show, options = {}) {
      const { showPopup } = this.data
      if (typeof show !== 'boolean') {
        show = !showPopup
      }
      if (show === showPopup) {
        return
      }
      this.onBeforeToggle(show).then((status) => {
        var _a
        if (!status) {
          return
        }
        this.setData({
          transition: !options.immediate,
          showPopup: show,
        })
        if (show) {
          ;(_a = this.parent) === null || _a === void 0
            ? void 0
            : _a.getChildWrapperStyle().then((wrapperStyle) => {
                this.setData({ wrapperStyle, showWrapper: true })
                this.rerender()
              })
        } else {
          this.rerender()
        }
      })
    },
    onBeforeToggle(status) {
      const { useBeforeToggle } = this.data
      if (!useBeforeToggle) {
        return Promise.resolve(true)
      }
      return new Promise((resolve) => {
        this.$emit('before-toggle', {
          status,
          callback: (value) => resolve(value),
        })
      })
    },
  },
})
